<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			.row {
				height: 40px;
				line-height: 40px;
				padding-left: 12px;
				font-size: 13px;
			}
			
			.label {
				display: inline-block;
				width: 126px;
			}
			
			.row input {
				width: 353px;
			}
			
			.text-center {
				text-align: center;
			}
			
			.btnarea {
				margin-top: 70px;
			}
			
			input[type=submit] {
				background-color: #169BD5;
				border-color: #169BD5;
			}
			
			input[type=button] {
				background-color: #FE8130;
				border-color: #FE8130;
			}
			
			input[type=submit],
			input[type=button] {
				border-radius: 5px;
				color: white;
				padding: 4px 26px;
			}
			
			.row img {
				position: absolute;
				z-index: 1;
				width: 75px;
				height: 75px;
			}
			
			.row input[type=file] {
				opacity: 0;
				width: 75px;
				height: 75px;
				position: absolute;
				z-index: 2;
				border: none;
				outline: none;
			}
			
			#selectbtn {
				cursor: pointer;
				color: #33A7DA;
			}
			
			.row input[type=checkbox]{
				width: auto;
			}
			.pr15{
				padding-right: 15px;
			}
			
			.x33{
				width: 32%;
				display: inline-block;
			}
		</style>
	</head>

	<body>
		<form action="" method="get">
			<div class="row"><span class="label">管理员名称</span><input type="text" /></div>
			<div class="row"><span class="label">登录账号</span><input type="text" /></div>
			<div class="row"><span class="label">登录密码</span><input type="text" /></div>
			<div class="row"><span class="label" style="float: left;">APP权限</span>
				<div style="float: left;width: 388px;margin-bottom: 20px;">
					<label><input type="checkbox" /><span>全选</span><br></label>
					<label class="x33"><input type="checkbox" /><span class="pr15">我的余额</span></label>
					<label class="x33"><input type="checkbox" /><span class="pr15">交易账单</span></label>
					<label class="x33"><input type="checkbox" /><span class="pr15">外卖团购</span></label>
					<label class="x33"><input type="checkbox" /><span class="pr15">金融服务</span></label>
					<label class="x33"><input type="checkbox" /><span class="pr15">二维码收款</span></label>
					<label class="x33"><input type="checkbox" /><span class="pr15">应用市场</span></label>
					<label class="x33"><input type="checkbox" /><span class="pr15">我的应用</span></label>
				</div>
			</div>
			<div class="text-center btnarea">
				<input type="submit" value="保存" /> &nbsp;&nbsp;&nbsp;
				<input type="button" value="删除" />
			</div>
		</form>
		<!--脚本开始-->
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			document.getElementById("upload").addEventListener("change", function(e) {
				if(!/image\/\w+/.test(this.files[0].type)) {
					alert("看清楚，这个需要图片！");
					return false;
				}
				var reader = new FileReader();
				reader.readAsDataURL(this.files[0]);
				reader.onload = function() {
					document.getElementById("preimg").src = this.result;
				}
			})
		</script>
	</body>

</html>